<template>
	<view class="calendarCustom animate fadeIn" v-if="isShow">
		<view class="mask"></view>
		<view class="popup" width="720rpx">
			<view class="gui-relative gui-box-shadow gui-img-in popup-box">
				<view class="guipopup-btns">
					<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
						style="width:80rpx;" @click="close">
						<text class="gui-block gui-color-white gui-button-text-mini gui-icons">{{$t('calendar.cancel')}}</text>
					</button>
					<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
						style="width:90rpx;" @click="confirmFn">
						<text class="gui-block gui-color-white gui-button-text-mini gui-icons">{{$t('calendar.confirm')}}</text>
					</button>
				</view>
				<view class="guipopup-btns">
					<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
						style="width:200rpx;" @click="getTimeFn(-3)">
						<text class="gui-color-white gui-button-text-mini gui-icons">{{$t('calendar.threeDaysAgo')}}</text>
					</button>
					<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
						style="width:200rpx;" @click="getTimeFn(-7)">
						<text class="gui-color-white gui-button-text-mini gui-icons">{{$t('calendar.sevenDaysAgo')}}</text>
					</button>
					<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
						style="width:200rpx;" @click="getTimeFn(-30)">
						<text class="gui-color-white gui-button-text-mini gui-icons">{{$t('calendar.thirtyDaysAgo')}}</text>
					</button>
				</view>
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="popup-scroll">
					<!-- <gui-date-between ref="guiDateBetween" @selectDate="selectDate" :monthNumber="24">
					</gui-date-between> -->
					<uni-calendar class="uni-calendar--hook" :insert="true" :showMonth="false" @change="selectDate" :range="true"/>
				</scroll-view>
				<!-- 关闭按钮 -->
				<image class="close" src="../static/components/close.png" @tap.stop="close"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
		reactive,
		defineProps,
		watch,
		toRaw
	} from 'vue'
	import graceJS from "@/Grace6/js/grace.js";
	import {
		getDay
	} from '@/utils/time.js'
	import {
		useI18n
	} from 'vue-i18n';
	const {
		ctx
	} = getCurrentInstance()
	const {
		t
	} = useI18n();
	// 控制组件的显示与隐藏
	let isShow = ref(false);
	// 用户选择时间
	let chooseTime = reactive({
		time:[]
	});

	const emit = defineEmits(['setTime']);
	const props = defineProps({
		selectTime: Array
	})
	// 触发向父组件传值
	const setTime = () => {
		emit('setTime', chooseTime.time)
		close()
		chooseTime.time = []
	}
	// 用户点击确认
	const confirmFn = () => {
		if (chooseTime.time.length == 0) {
			graceJS.msg(t('distributedEnter.dateChooseMsg'));
			return
		}
		setTime()
	}
	// 打开日历弹窗
	const open = () => {
		isShow.value = true;
	}
	// 关闭日历弹窗
	const close = () => {
		isShow.value = false;
	}
	// 用户选择时间触发事件
	const selectDate = (e) => {
		chooseTime.time = [e.range.before, e.range.after];
		console.log(chooseTime.time, 'time');
	}
	// 求出近N天的时间
	const getTimeFn = (num) => {
		let lastTime = getDay(num);
		let nowTime = getDay(0);
		chooseTime.time = [lastTime, nowTime]
		setTime()
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.popup-box {
		background-color: #fff;
		height: 68vh;
		padding-top: 100rpx;
	}

	.guipopup-btns {
		padding: 0 40rpx;
		margin-bottom: 15rpx;
		display: flex;
		justify-content: space-between;
	}

	.close {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.popup-scroll {
		width: 690rpx;
		height: 55vh;
		padding: 0 15rpx;
	}

	.calendarCustom {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
	}

	.mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .5);
	}

	.popup {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -48%);
	}
</style>
